<template>
	<div class="content foSi14">
		<div class="mar" style="width: 840px;">
			<div class="base-title">账号信息</div>
			<div class="item-l wid100 item-p hei44 dis disAl">
				<div style="width: 180px;">账号登录</div>
				<div class="dis" style="padding-left: 10px;">
					<span>{{getName}}</span>
					<!-- <span class="mar-left10">{{getName}}</span> -->
				</div>
			</div>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
				<div class="mar-top10 item-l wid100 item-p hei44 dis disAl">
					<div style="width: 180px;">原有密码</div>
					<el-form-item class="mp0" prop="old_password">
						<el-input v-model="ruleForm.old_password" password style="width: 230px;" placeholder="请输入原有密码" />
					</el-form-item>
				</div>
				<div class="mar-top10 item-l wid100 item-p hei44 dis disAl">
					<div style="width: 180px;">设置新密码</div>
					<el-form-item class="mp0" prop="new_password">
						<el-input v-model="ruleForm.new_password" password style="width: 230px;" placeholder="请输入新密码" />
					</el-form-item>
					<div class="mar-left10">新密码，6-20位</div>
				</div>
				<div class="mar-top10 item-l wid100 item-p hei44 dis disAl">
					<div style="width: 180px;">重复新密码</div>
					<el-form-item class="mp0" prop="repeat_password">
						<el-input v-model="ruleForm.repeat_password" password style="width: 230px;" placeholder="请重复新密码" />
					</el-form-item>
				</div>
				<div class="dis disAl disJuC" style="padding: 40px 0;">
					<div class="que coFFF borRad5 cuPo"@click.stop="submitForm('ruleForm')"
						style="background: #6b7cdd;">确认修改</div>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		resetPassword
	} from '@/api/user'
	export default {
		name: 'changePassword',
		components: {
			Pagination
		},
		data() {
			const valPassword = (rule, value, callback) => {
				if (!value || value.length < 6 || value.length > 20) {
					callback(new Error('请正确填写原有密码'))
				} else {
					callback()
				}
			}
			const valrepeat_password = (rule, value, callback) => {
				if (!value || this.ruleForm.new_password !== value) {
					callback(new Error('两次密码不一致'))
				} else {
					callback()
				}
			}
			return {
				ruleForm: {
					old_password: '',
					new_password: '',
					repeat_password: '',
				},
				rules: {
					old_password: [{
						required: true,
						trigger: 'blur',
						validator: valPassword
					}],
					new_password: [{
						required: true,
						trigger: 'blur',
						validator: valPassword
					}],
					repeat_password: [{
						required: true,
						trigger: 'blur',
						validator: valrepeat_password
					}],
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			]),
			getName() {
				return this.$store.state.user.name
			},
		},
		created() {
			var xuanList = [{
				name: '修改密码',
				url: '/changePassword',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
		},
		methods: {
			async logout() {
				await this.$store.dispatch('user/logout')
				this.$router.push(`/login`)
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						resetPassword(this.ruleForm).then(response => {
							this.logout()
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20px;
	}
	.base-title {
	    height: 22px;
	    font-size: 12px;
	    color: #787878;
	}
</style>
